import { Meta } from "@storybook/addon-docs";
import { useTheme, ThemeProvider } from "@design-system/theming";
import { TokenTable, StyledLinePreview } from "@design-system/storybook";

<Meta title="Design-system/Theme/Tokens/Sizing" />

# Sizing

Sizing is a fundamental aspect of design systems that determines the
measurements of various elements in a user interface. It refers to the
process of defining consistent measurements for different components
such as buttons, icons, typography, and spacing to ensure that they are
visually balanced and harmonious.

We use root unit to calculate values of all sizes since this is a
fundamental element and used to define the size of all the other
elements in the system.

## Tokens Table

export const Sizing = () => {
  const { theme } = useTheme();
  const { sizing } = theme;
  return (
    <ThemeProvider theme={theme}>
      <TokenTable prefix="sizing" tokens={sizing}>
        {(cssVar) => (
          <StyledLinePreview
            style={{
              width: cssVar,
            }}
          />
        )}
      </TokenTable>
    </ThemeProvider>
  );
};

<Sizing />
